<template>
  <div class="advert-create-or-edit" v-loading="loading">
    <el-card>
      <div slot="header">
        <el-button @click="$router.back()">返回</el-button>
      </div>
      <el-form label-width="120px" :model="adForm">
        <el-form-item label="广告名称">
          <el-input v-model="adForm.name"></el-input>
        </el-form-item>
        <el-form-item label="广告位置">
          <el-select v-model="adForm.spaceId" placeholder="请选择">
            <el-option
              v-for="item in spaces"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="adForm.startTime"
            type="datetime"
            placeholder="选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="到期时间">
          <el-date-picker
            v-model="adForm.endTime"
            type="datetime"
            placeholder="选择到期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上线/下线">
          <el-radio-group v-model="adForm.status">
            <el-radio :label="0">下线</el-radio>
            <el-radio :label="1">上线</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="广告图片">
          <el-input v-model="adForm.img"></el-input>
        </el-form-item>
        <el-form-item label="广告链接">
          <el-input v-model="adForm.link"></el-input>
        </el-form-item>
        <el-form-item label="广告备注">
          <el-input v-model="adForm.text" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="handleReset" v-if="!advertId">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import {
  getAllSpaces,
  adUpdateStatus,
  getAdById
} from '@/services/advert'

export default Vue.extend({
  name: 'AdvertCreateOrEdit',
  props: {
    advertId: {
      type: [String, Number]
    }
  },
  data () {
    return {
      adForm: {
        name: '',
        spaceId: '',
        startTime: '',
        endTime: '',
        status: 0,
        img: '',
        link: '',
        text: ''
      },
      spaces: [],
      loading: false
    }
  },
  created () {
    this.loadAllSpaces()
    if (this.advertId) {
      this.loadInfo()
    }
  },
  methods: {
    async loadAllSpaces () {
      const { data } = await getAllSpaces()
      this.spaces = data.content
    },
    async handleSubmit () {
      this.$confirm('是否提交数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await adUpdateStatus(this.adForm)
        this.$message.success('操作成功')
        this.$router.back()
      }).catch(console.log)
    },
    handleReset () {
      this.adForm = {
        name: '',
        spaceId: '',
        startTime: '',
        endTime: '',
        status: 0,
        img: '',
        link: '',
        text: ''
      }
    },
    async loadInfo () {
      this.loading = true
      const { data } = await getAdById(this.advertId)
      this.adForm = data.content
      this.loading = false
    }
  }
})
</script>
